<template>
  <f7-page class="center-body">
    <!-- 头部 -->
    <div class="header-f7">
      <f7-link back icon-material="chevron_left"></f7-link>
    </div>
    <f7-nav-title class="header">
      <img src="static/img/center/man-png.png" alt="" class="portrait" />
      <f7-block-title class="name">刘辰</f7-block-title>
      <f7-block class="introduce">胚豆智能科技(武汉)有限公司</f7-block>
    </f7-nav-title>
    <!-- 中部 -->
    <f7-list class="qm-list">
      <f7-list-item
        :link="item.href"
        :title="item.title"
        class="middle"
        v-for="(item, index) in list"
        :key="index"
        :after="item.after"
      >
        <f7-icon slot="media">
          <img
            :src="item.image"
            alt=""
            class="myimg"
            style="vertical-align: middle"
          />
        </f7-icon>
      </f7-list-item>
    </f7-list>
    <!-- 虚线 -->
    <div class="line"></div>
    <f7-list class="qm-list">
      <f7-list-item
        :link="item.href"
        :title="item.title"
        class="middle"
        v-for="(item, index) in list2"
        :key="index"
        :after="item.after"
      >
        <f7-icon slot="media">
          <img :src="item.image" alt="" class="myimg" />
        </f7-icon>
      </f7-list-item>
    </f7-list>
    <!-- 底部导航栏 -->
    <f7-viewbar-instince slot="fixed"></f7-viewbar-instince>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      title: "myself",
      list: [
        {
          title: "标准流程",
          image: "static/img/center/index1/Combined-shape.svg",
          href: "/ui/center/index2",
        },
        {
          title: "我的邮箱",
          image: "static/img/center/index1/my-email.svg",
          href: "/ui/center/index2",
        },
        {
          title: "工作团队",
          image: "static/img/center/index1/technological-process2.svg",
          href: "/ui/center/index2",
        },
      ],
      list2: [
        {
          title: "我的培训",
          image: "static/img/center/index1/academic-degree.svg",
          href: "/ui/center/index2",
        },
        {
          title: "我的资产",
          image: "static/img/center/index1/my-assets.svg",
          href: "/ui/center/index2",
        },
        {
          title: "系统设置",
          image: "static/img/center/index1/set-up.svg",
          href: "/ui/set/index",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.center-body {
  position: relative;
  height: 100%;
  background-color: var(--color-fill-grey-inverse);

  .header-f7 {
    position: absolute;
    top: 2%;
    left: 5%;
    color: #fff;
    --f7-theme-color: #fff;
  }

  .header {
    margin: 0px;
    background: url("../../../../static/img/center/index1/bg_me.png") no-repeat;
    background-size: 100% 100%;
    background-attachment: local;
    width: 100%;
    height: calc(360px * var(--ratio));
    text-align: center;

    .portrait {
      width: calc(120px * var(--ratio));
      height: calc(120px * var(--ratio));
      border-radius: 50%;
      margin-top: calc(48px * var(--ratio));
    }

    .name {
      margin-top: calc(32px * var(--ratio));
      margin-bottom: calc(9px * var(--ratio));
      font-size: calc(44px * var(--ratio));
      line-height: 23px;
      color: var(--color-fill-grey-inverse);
      font-weight: 600;
    }

    .introduce {
      color: var(--color-fill-grey-inverse);
      font-style: var(--font-size-subcontent);
    }
  }

  .qm-list {
    margin-top: 15px;

    .middle {
      --f7-list-border-color: var(--color-fill-grey-inverse);
      --f7-list-item-border-color: var(--color-fill-grey-inverse);
      --f7-list-margin-vertical: 13.44px;
      --f7-list-item-title-font-size: var(--font-size-maincontent);
      --f7-list-item-media-margin: 0px;
     /deep/ .item-inner {
        &::before {
          content: "";
          margin-top: 0;
          width: 12px;
          height: 18px;
          background-image: url("../../../../static/img/list/right-arrow.svg");
          background-repeat: no-repeat;
          background-size: contain;
          transform: translate(0, -50%);
        }
      }
      .myimg {
        width: 24px;
        height: 24px;
      }
      .item-media {
        min-width: 0px;
        margin-right: 13px;
      }
    }
  }

  .line {
    margin: 0px 20px;
    width: 90%;
    height: 1px;
    background-color: var(--color-divider-background);
  }

  .footer::after {
    background: var(--color-fill-grey-inverse);
    box-shadow: 4px -1px 12px 3px #0000000a;
  }
}
</style>
